<script setup lang="ts">
import {computed, ref} from "vue";

interface MenuItem {
  index: string;
  icon?: URL | string;
  title: string;
  children?: MenuItem[];
}

const menuItems = ref<MenuItem[]>([
  {
    index: '1-1', icon: 'el-icon-document', title: '基础几何体', children: [
      {index: '1-1-1', icon: new URL('@/assets/cube.png', import.meta.url).href, title: '立方体'},
      {index: '1-1-2', icon: new URL('@/assets/ball.png', import.meta.url).href, title: '球体'},
      {index: '1-1-3', icon: new URL('@/assets/pipe.png', import.meta.url).href, title: '管道'}
    ]
  }
]);


const searchQuery = ref<string>('');

const filteredMenuItems = computed(() => {
  if (!searchQuery.value) return menuItems.value;

  return menuItems.value.filter(item => {
    const hasMatchingChild = item.children?.some(child => child.title.toLowerCase().includes(searchQuery.value.toLowerCase()));
    return item.title.toLowerCase().includes(searchQuery.value.toLowerCase()) || hasMatchingChild;
  });
});
const createFolder = () => {
  // Logic to create a new folder
  console.log('Create new folder');
};

const editFolder = (folder: MenuItem) => {
  // Logic to edit the folder
  console.log('Edit folder:', folder);
};

const deleteFolder = (folder: MenuItem) => {
  // Logic to delete the folder
  console.log('Delete folder:', folder);
};
</script>

<template>
  <div class="model-view">
    <!-- 左侧导航栏容器 -->
    <div class="menu-container">
      <!-- 搜索框 -->
      <el-input
          v-model="searchQuery"
          placeholder="搜索..."
          class="search-box"
      />
      <!-- 新建文件夹按钮 -->
      <div class="create-folder" @click="createFolder">+ 新建文件夹</div>
      <!-- 导航栏 -->
      <el-menu
          background-color="#1e2430"
          text-color="#fff"
          active-text-color="#ffd04b"
          class="side-bar"
      >
        <el-sub-menu v-for="item in filteredMenuItems" :key="item.index" :index="item.index">
          <template #title>
            <span>{{ item.title }}</span>
          </template>
          <el-menu-item v-for="child in item.children" :key="child.index" :index="child.index">
            <img v-if="child.icon" :src="child.icon" alt="" style="width: 30px;height: 30px;"/>{{ child.title }}
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>
  </div>
</template>

<style scoped>
:deep .el-input__wrapper {
  background-color: gray !important;
  box-shadow: none;
}

.model-view {
  height: 100%;
  display: flex;
  align-items: flex-start;
}

.menu-container {
  height: 95vh;
  width: 14vw; /* 确保宽度与 .side-bar 一致 */
  display: flex;
  flex-direction: column;
}

.search-box {
  margin-bottom: 0; /* 调整搜索框与菜单之间的间距 */
  padding: 5px; /* 添加内边距 */
  border: none; /* 去掉边框 */
  background-color: #1e2430; /* 设置背景颜色为灰色 */
  color: #fff; /* 设置文字颜色为白色 */
}

/* 新增样式以去除中间的白色空隙并设置淡灰色背景 */
.search-box .el-input__inner {
  background-color: #474e5b; /* 淡灰色背景 */
  border: none;
  height: 32px; /* 调整高度以匹配默认样式 */
}

.side-bar {
  flex-grow: 1; /* 让 el-menu 占据剩余空间 */
  width: 100%;
  margin-right: 20px;
}

.create-folder {
  padding-left: 0.8vw;
  padding-top: 1vh;
  height: 3vh;
  background-color: #1e2430;
  cursor: pointer;
  color: rgb(69,131,255); /* 默认字体颜色为蓝色 */
  font-size: 0.8vw;
  text-decoration: none; /* 默认没有下划线 */
}

.create-folder:hover {
  text-decoration: underline; /* 鼠标悬浮时添加下划线 */
}

.main-content {
  flex-grow: 1;
  padding: 0;
}
</style>